<template>
  <el-header class="el-header">
    <div class="logo">
      {{nickname}}
    </div>
    <div class="name">
      <img src="../assets/logo.png">
   赛课后台管理系统
    </div>
  </el-header>
</template>

<script setup>
const username = JSON.parse(localStorage.getItem('userInfo')).userData[0];
const nickname = username.nickName
</script>

<style>
.el-header{
  padding:0px;
}
</style>
<style scoped lang="scss">
.el-header {
  padding: 0;
  text-align: center;
  display: flex;
  height: 55px;
  background-color: rgb(64, 158, 255);
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  font-weight: bolder;

  .logo {
    font-size: 24px;
    font-weight: bold;
    display: flex;
    padding: 0 30px;
    width: 300px;
    text-align: center;
    line-height: 50px;
  }

  .name {
    img {
      width: 35px;
      height: 35px;
      margin-top: 5px;
      margin-right: 5px;
    }
    width: calc(100% - 500px);
    font-size: 28px;
    text-align: center;
    line-height: 50px;
    display: flex;
    margin-left: 400px;
  }
}
</style>